<style media="screen">
  .head-container {
    position: relative;
    padding: 10px 0 14px;
    border-bottom: 1px solid #E3E3E5;
  }

  .head-container .mes {
    overflow: hidden;
    margin-right: 10px;
    float: left;
  }

  .head-container .mes p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .mes input {
    width: 260px;
    height: 34px;
  }

  .head-container .flow {
    float: left;
    margin-right: 10px;
  }

  .head-container .flow p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .flow .flow-select {
    width: 140px;
    height: 34px;
  }

  .head-container .button-group {
    padding-top: 23px;
  }

  .repeatSearch {
    display: flex;
    justify-content: center;
    align-items: center;
	cursor: pointer;
  }

  .repeatSearch span {
    padding-right: 10px;
    border-right: 1px solid #C3C3C3;
    margin-right: 8px;
    color: #476799;
    line-height: 12px;
  }

  .repeatSearch img {
    width: 14px;
    height: 14px;
  }
  .dialogCont{
    display: flex;
    flex-wrap: wrap;
  }

  .dialogCont li{
    width: 108px;
    line-height: 34px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #d8d8d8;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    margin-bottom: 20px;
    margin-right: 20px;
	background: #fff;
  }

  .dialogCont li:nth-child(4n+4){
    margin-right: 0;
  }

  .dialogCont .active{
    background: #565E99;
    color: #fff;
  }
</style>

<section class="pl-24 pr-24" class="businessDispatch" id="customerManagement" @click="hideRpersonList">
	<div class="upload-filess"></div>
	
  <hl-page-header title="客户管理">
    <hl-button type="outline" @on-click="goToAddCustomer" v-if="quanxian.indexOf('c44') > -1">新增客户</hl-button>
		<hl-button type="outline" @on-click="importExcl" v-if="quanxian.indexOf('c350') > -1">导入客户</hl-button>
		<hl-button type="outline" @on-click="customer_export" v-if="quanxian.indexOf('c351') > -1">导出客户</hl-button>
  </hl-page-header>

  <div class="head-container clearfix">
    <div class="clearfix">
      <div class="mes">
        <p>信息检索</p>
        <div class="global_search">
          <span class="icon-Gm-search"></span>
          <input autocomplete="off" type="text" class="global_ipt_text" placeholder="主题/目标客户/联系人/联系电话/创建人" v-model="keyWord" />
        </div>
      </div>
      <div class="flow">
        <p>客户类型</p>
        <hl-select :data="customerType" v-model="selectedCustomerType" width="120"></hl-select>
      </div>
      <div class="flow">
        <p>所属行业</p>
        <hl-select :data="industryType" v-model="selectedIndustryType" width="120" ></hl-select>
      </div>
      <div class="flow">
        <p>对接人</p>
        <div class="pull-left line-height-34 relative">
          <input type="text" placeholder="全部" class="global_ipt_text" autocomplete="off" style="width:140px;" v-model="rpersonKeyword" @input="getRpersonData" />
          <ul class="append-temp absolute bg-fff border z-998 line-height-34" style="left:0; top:35px; max-height:200px; overflow-y:scroll; width: 100%; text-indent:0.8em;" v-if="rperson.list.length > 0">
            <li v-for="item in rperson.list" :key="item.userId" class="clearfix" @click="setRperson(item.name, item.id)">
              <span class="pull-left">{{item.name}}</span>
              <span class="pull-right">{{item.phone}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="button-group" v-show="!isExtenseFlag">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>
    <div class="mt-10" v-show="isExtenseFlag">
      <div class="flow">
        <p>渠道分类</p>
        <hl-select :data="channelType" v-model="selectedChannelType" width="120" @on-change="selectChannelType"></hl-select>
      </div>
      <div class="flow">
        <p>渠道名称</p>
        <hl-select :data="channelName" v-model="selectedChannelName" width="120" ></hl-select>
      </div>
      <div class="flow">
        <p>黑名单</p>
        <hl-select :data="blackData" v-model="selectedBlackType" width="120" ></hl-select>
	  </div>
	  <div class="flow">
        <p>项目</p>
        <hl-select :data="projectList" v-model="selectedProject" width="140" ></hl-select>
      </div>
      <div class="button-group">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>
    <div class="global_open_sign" @click="openSearch">
      <span v-if="!isExtenseFlag">更多筛选项</span>
      <span v-if="isExtenseFlag">收起筛选项</span>
    </div>
  </div>

  <div class="dy-flex" style="justify-content: space-between;align-items: center;">
	<div class="global_screening_container">
	  <hl-checkbox-button :data="listMenu" v-model="selectedListMenuCode" @on-click="selectMenuList" merge></hl-checkbox-button>
	  <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar" style="left:410px"></span>
	</div>
	<div class="repeatSearch" style="justify-content: space-between;align-items: center;">
	  <span v-if="!repeatXSflag" @click="repeatXSfun">重复客户查询</span>
      <span v-else @click="resetRepeatXS">重置</span>
	  <img @click="addRepeatSearchFun" src="assets/images/Setting.png" alt="">
	</div>
  </div>
  

  <hl-list :menu-data="headArr" :data="listObj.myCustomers" :config-type="configType" :loadingflag="loadingflag" @on-click-sort="sortBySTTime" @on-click-type="selectTableType" @on-click-custom="confirmSubmitTable" v-slot:default="{opData, opIndex}">
    <a @click="goTodetail(opData.id)">详情</a>
  </hl-list>

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{totalCount}}</i>条记录</span>
      <span>每页<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="selectPerNum"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="searchData"></hl-pagination>
    </div>
  </div>
	
	
	<div class="mark-yuce" v-if="importFlag">
	  <div class="yuce-contains" style="width:480px;">
	    <div class="title">导入客户</div>
	    <div class="close" @click="importExclClose">x</div>
	    <div class="yuce-orge">
	      <div class="dy-flex line-height-34 pt-15">
	        <div class="dy-fx-1">
	          <input type="text" class="filename-i form-control bg-fff inline" readonly style="vertical-align: middle;width:348px;" id="exclName">
	          <button class="btn s-btn-default" style="vertical-align: middle;" @click="downloadxslc">上传</button>
	        </div>
	      </div>
	      <div class="mt-5">
	        <a @click="getExcl">下载模板</a>
	      </div>
	      <div class="text-center dy-flex center-dy">
	        <div class="pt-15" v-if="detectionBtn">
	          <a class="detection" @click="detectionXslx">检测</a>
	        </div>
	        <div class="pt-15" v-if="detection">
	          <div class="typing_loader"></div>
	          数据校验中
	        </div>
	        <div class="pt-15" v-if="notThrough">
	          <div class="icon-Gm-delete-2 pb-10" style="font-size: 24px; color:#fe6e63;"></div>
	          检测未通过！
	          <p v-if="isShowDownload"><a :href="srcUrl">下载报告</a></p>
	        </div>
	        <div class="pt-15" v-if="is500">
	          <div class="icon-Nav-dispose-complete pb-10" style="font-size: 24px; color:#73c676;"></div>
	          存在重复客户，确认继续提交
	          <p v-if="isShowDownload"><a :href="srcUrl">下载报告</a></p>
	        </div>
	        <div class="pt-15" v-if="through && !is500">
	          <div class="icon-Nav-dispose-complete pb-10" style="font-size: 24px; color:#73c676;"></div>
	          检测通过！
	        </div>
	      </div>
	    </div>
	    <div class="orge-footer text-center" v-if="through">
	      <button type="button" class="btn n-btn-primary mr-10" style="width:90px;min-width:80px;" @click="submibXslc">确认上传</button>
	      <button type="button" class="btn n-btn-outline" @click="importExclClose">取消</button>
	    </div>
	    <div class="orge-footer text-center" v-if="(!notThrough || notThrough) && !through" style="opacity: 0.5;">
	      <button type="button" class="btn n-btn-primary mr-10" style="width:90px;min-width:80px;">确认上传</button>
	      <button type="button" class="btn n-btn-outline" @click="importExclClose">取消</button>
	    </div>
	  </div>
	</div>

	<div v-if="repeatSearchFlag" class="backdrop dy-flex" style="justify-content: center;align-items: center;">
		<div class="bg-fff relative br-4" style="width: 536px;">
		  <div class="font-16 line-height-45 text-center font-wt">重复规则</div>
		  <div class="font-14 absolute icon-Gm-close text-center line-height-45 close"  style="right: 0;top: 0;width: 45px;height: 45px;" @click="repeatSearchFlag = false"></div>
		  <div style="background:rgba(249,249,249,1);padding: 16px 22px 33px">
			<div class="font-14 color-666" style="margin-bottom: 14px;">配置校验项</div>
			<ul class="dialogCont">
			  <li v-for="item in repeatXSlist" :class="selectedXS.indexOf(item.code) != -1?'active':''" @click="selectedXSfun(item.code)">{{item.name}}</li>
			</ul>
		  </div>
	
		  <div class="ptb-10 text-center">
			<hl-button type="primary" @on-click="sureAddRepeatFun">确认</hl-button>
			<hl-button type="outline" @on-click="repeatSearchFlag = false">取消</hl-button>
		  </div>
		</div>
	</div>
</section>

<style>
	.mark-yuce {
	  width: 100%;
	  height: 100%;
	  position: fixed;
	  left: 0;
	  top: 0;
	  z-index: 999;
	  background-color: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.yuce-contains {
	  width: 615px;
	  background-color: #fff;
	  border-radius: 4px;
	  position: relative;
	}
	
	.yuce-contains .title {
	  line-height: 45px;
	  text-align: center;
	  height: 45px;
	}
	
	.yuce-contains .close {
	  position: absolute;
	  right: 0;
	  top: 0;
	  width: 45px;
	  height: 45px;
	  text-align: center;
	  line-height: 45px;
	}
	
	.yuce-orge {
	  padding-left: 24px;
	  padding-right: 24px;
	  background-color: #f2f2f2;
	  padding-bottom: 15px;
	}
	
	.orge-footer {
	  padding: 8px 0;
	}
	
	.select-yuce {
	  position: absolute;
	  right: 141px;
	  top: 0;
	  width: 120px;
	}
	
	.footer-template {
	  position: fixed;
	  bottom: 10px;
	}
	
	.center-dy {
	  justify-content: center;
	  align-items: center;
	}
	
	.pos-center {
	  position: absolute;
	  left: 0;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  text-align: center;
	}
	
	.btn-orgn {
	  position: relative;
	  z-index: 1;
	  width: 100%;
	  min-width: 5px;
	  max-width: 40px;
	  float: right;
	  line-height: 40px;
	  box-sizing: border-box;
	  text-align: right;
	  padding-right: 10px;
	  display: block;
	}
	
	.detection {
	  width: 160px;
	  height: 46px;
	  line-height: 46px;
	  border-radius: 23px;
	  margin: 20px 0;
	  display: block;
	  background-color: #fff;
	  box-shadow: 0px 0px 10px 0px rgba(224, 228, 255, 1);
	}
	
	/*Typing Loader*/
	
	.typing_loader {
	  width: 6px;
	  height: 6px;
	  border-radius: 50%;
	  -webkit-animation: typing 1s linear infinite alternate;
	  -moz-animation: Typing 1s linear infinite alternate;
	  -ms-animation: Typing 1s linear infinite alternate;
	  animation: typing 1s linear infinite alternate;
	  margin: 8px auto;
	  position: relative;
	  left: -12px;
	}
	
	@-webkit-keyframes typing {
	  0% {
	    background-color: rgba(0, 0, 0, 1);
	    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
	  }
	  25% {
	    background-color: rgba(0, 0, 0, 0.4);
	    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
	  }
	  75% {
	    background-color: rgba(0, 0, 0, 0.4);
	    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 1);
	  }
	}
	
	@-moz-keyframes typing {
	  0% {
	    background-color: rgba(0, 0, 0, 1);
	    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
	  }
	  25% {
	    background-color: rgba(0, 0, 0, 0.4);
	    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
	  }
	  75% {
	    background-color: rgba(0, 0, 0, 0.4);
	    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 1);
	  }
	}
	
	@keyframes typing {
	  0% {
	    background-color: rgba(0, 0, 0, 1);
	    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
	  }
	  25% {
	    background-color: rgba(0, 0, 0, 0.4);
	    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
	  }
	  75% {
	    background-color: rgba(0, 0, 0, 0.4);
	    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 1);
	  }
	}
</style>

<script src="modules/customer/scripts/customer_management.js" charset="utf-8"></script>
